<template>
	<div class="chatContainer">
		<!-- 顶部标题 -->
		<div class="chatHeader">新对话</div>

		<!-- 聊天记录 -->
		<div class="chatMessages" ref="messageContainer">
			<div v-for="(msg, index) in messages" :key="index" :class="['chatItem', msg.role]">
				<img class="avatar" :src="msg.role === 'ai' ? aiAvatar : userAvatar" alt="avatar" />
				<div class="bubbleWrapper">
					<div class="chatMessage">
						{{ msg.text }}
					</div>
					<div class="timeStamp">{{ msg.time }}</div>
				</div>
			</div>
		</div>

		<!-- 输入框 -->
		<div class="chatInputWrapper">
			<textarea v-model="message" class="chatTextarea" placeholder="请输入内容" rows="2"></textarea>
			<div class="inputButtons">
				<button class="chatButton" @click="onAttach">＋</button>
				<button class="chatButton sendButton" @click="onSend">↑</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue'

	const message = ref('')
	const messages = ref([{
		role: 'ai',
		text: '你好，我是你的AI助手！',
		time: getTime()
	}])

	const aiAvatar = '/static/img/Doctor.jpg'
	const userAvatar = '/static/logo.png'

	const messageContainer = ref(null)

	function getTime() {
		const date = new Date()
		return date.toLocaleTimeString('zh-CN', {
			hour12: false
		})
	}

	const onAttach = () => {
		uni.showToast({
			title: '附件功能暂未实现',
			icon: 'none'
		})
	}

	const onSend = async () => {
		const trimmed = message.value.trim()
		if (!trimmed) return

		messages.value.push({
			role: 'user',
			text: trimmed,
			time: getTime()
		})
		message.value = ''
		await nextTick()
		scrollToBottom()

		// 模拟 AI 回复
		setTimeout(async () => {
			messages.value.push({
				role: 'ai',
				text: `你说的是：“${trimmed}”`,
				time: getTime()
			})
			await nextTick()
			scrollToBottom()
		}, 500)
	}

	function scrollToBottom() {
		const el = messageContainer.value
		if (el) el.scrollTop = el.scrollHeight
	}
</script>

<style scoped>
	.chatContainer {
		display: flex;
		flex-direction: column;
		height: 100vh;
		max-width: 600px;
		margin: 0 auto;
		background: #f2f2f2;
		border: 1px solid #ddd;
		border-radius: 10px;
		overflow: hidden;
	}

	.chatHeader {
		background: #ffffff;
		padding-top: 15px;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}

	.chatMessages {
		flex: 1;
		padding: 15px;
		overflow-y: auto;
		background: #fff;
	}

	.chatItem {
		display: flex;
		margin-bottom: 15px;
	}

	.chatItem.ai {
		flex-direction: row;
		align-items: flex-start;
	}

	.chatItem.user {
		flex-direction: row-reverse;
		align-items: flex-start;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin: 0 10px;
	}

	.bubbleWrapper {
		display: flex;
		flex-direction: column;
		max-width: 75%;
	}

	.chatMessage {
		padding: 10px 14px;
		border-radius: 10px;
		background: #eeeeee;
		word-break: break-word;
	}

	.chatItem.user .chatMessage {
		background: #d1eaff;
		text-align: right;
	}

	.timeStamp {
		font-size: 12px;
		color: #888;
		margin-top: 4px;
		text-align: right;
	}

	.chatInputWrapper {
		position: relative;
		border-top: 1px solid #ccc;
		padding: 10px;
		background-color: white;
	}

	.chatTextarea {
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 10px;
		resize: none;
		outline: none;
		font-size: 16px;
		line-height: 1.4;
		padding: 8px;
		padding-right: 60px;
		box-sizing: border-box;
	}

	.inputButtons {
		position: absolute;
		right: 20px;
		bottom: 20px;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.chatButton {
		background: none;
		border: none;
		cursor: pointer;
		font-size: 20px;
		color: #555;
	}

	.sendButton {
		border: 1px solid #ccc;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
	}
</style>